<template>
	<app-layout>
		<view v-if="!detail" class="u-goods-detail"></view>
		<template v-if="detail">
			<!--商品轮播图-->
			<app-banner :videoUrl="detail.video_url" :share="detail.share" :picList="detail.pic_url"
				:goods_id="goods_id" sign="miaosha"></app-banner>
			<!-- 秒杀时间 -->
			<app-goods-time :day="day" :second="second" :minute="minute" :hour="hour" :theme="getTheme"
				:miaosha_status="miaosha_status"></app-goods-time>
			<!--商品价格-->
			<app-price-title-share :theme="getTheme" :is_vip_card_user="is_vip_card_user" :discount='discount'
				:name="detail.name" :price_member_max="detail.price_member_max"
				:price_member_min="detail.price_member_min" :price_min="detail.price_min" :price_max="detail.price_max"
				:level_show="detail.level_show" :original_price="detail.original_price"
				:miaosha_buy_count="miaosha_buy_count" :url="url" :unit="detail.unit" :has-poster-nav="true"
				:poster-config="poster_config" :poster-generate="poster_generate" :subtitle="detail.subtitle">
			</app-price-title-share>
			<!--商品会员-->
			<view class="join-member" v-if="detail.level_show === 2">
				<app-join-member :member-max-price="detail.price_member_max" :member-min-price="detail.price_member_min"
					:price="detail.price"></app-join-member>
			</view>
			<!--商品超级会员卡-->
			<!-- <view class="vip-card" v-if="is_vip">
				<app-vip-card background="#fff" top="0"></app-vip-card>
			</view> -->
			<!--商品服务-->
			<!-- <view v-if="detail.services.length > 0" class="goods-margin">
				<app-goods-service :guarantee_title="detail.guarantee_title" :guarantee_pic="detail.guarantee_pic"
					:list="detail.services"></app-goods-service>
			</view> -->
			<!--商品规格 :is_show_left="false" :is_must_left="false"-->
			<u-attr v-if="miaosha_status === 1" v-model="show" :themeObject="themeObject" :goods="detail"
				:checked="selectAttr" @check="attrtap" :leftFunc="true" @leftFunc="leftFunc" :rightFunc="true"
				@rightFunc="rightFunc">
				<view class="goods-margin" slot="btn" v-if="detail.type === 'goods'">
					<app-goods-attr :attr-groups="detail.attr_groups" :selectAttr="selectAttr" :attr="detail.attr">
					</app-goods-attr>
				</view>
			</u-attr>
			<!--商品优惠券-->
			<view class="goods-margin">
				<app-goods-coupon @change="setCoupon" :theme="getTheme" :coupons="detail.goods_coupon_center">
				</app-goods-coupon>
			</view>
			<!--商品信息-->
			<view class="goods-margin">
				<app-goods-marketing :express="detail.express" :pickup="detail.goods_marketing.pickup"
					:shipping="detail.goods_marketing.shipping" :limit="detail.goods_marketing.limit"
					:balance="detail.goods_marketing_award.balance" :card="detail.goods_marketing_award.card"
					:coupon="detail.goods_marketing_award.coupon" :theme="getTheme"
					:integral="detail.goods_marketing_award.integral"></app-goods-marketing>
			</view>
			<!-- 商品详情 -->
			<view class="goods-margin">
				<app-goods-detail :ispingtai="false" :goods="detail"></app-goods-detail>
			</view>
			<!-- 相关推荐 -->
			<!-- <app-related-suggestion-product :theme="getTheme" :list="list"></app-related-suggestion-product> -->
			<!-- 底部空格 -->
			<view class="safe-area-inset-bottom">
				<view class="u-bottom-height" :class="full_reduce ? 'u-bottom-height-1' : 'u-bottom-height-0'"></view>
			</view>
			<!-- 底部按钮 -->
			<view class="safe-area-inset-bottom u-bottom-fixed">
				<!-- <view v-if="full_reduce">
					<app-goods-full-reduce :theme="getTheme" :full_reduce="full_reduce">
					</app-goods-full-reduce>
				</view> -->
				<view class="buttons dir-left-nowrap">
					<!-- <view class="app-home dir-top-nowrap main-center cross-center"
						@click="router('/pages/index/index')">
						<image src="../../../static/image/icon/index.png"></image>
						<text>首页</text>
					</view> -->
					<view v-if="detail.goods_stock > 0" class="app-button dir-left-nowrap">
						<template v-if="miaosha_status === 1">
							<view class="app-join-cart box-grow-1" @click="takeCart"
								:class="getTheme === 'a' || getTheme === 'b' || getTheme === 'f' ? getTheme + '-s-back '+ 'text ' + getTheme : getTheme + '-s-back '+ getTheme + '-m-text ' + getTheme">
								加入购物车
							</view>
							<view @click="takeCart" :class="[getTheme + '-m-back', getTheme, 'box-grow-1', 'app-buy']">
								立即购买
							</view>
						</template>
						<view class="notStart box-grow-1" v-else-if="miaosha_status === 2">
							活动未开始
						</view>
						<view class="app-over box-grow-1" v-else-if="miaosha_status === 0">
							活动已结束
						</view>
					</view>
					<view class="app-button dir-left-nowrap" v-else>
						<view class="app-over box-grow-1" style="background-color: #CDCDCD;">
							已售罄
						</view>
					</view>
				</view>
			</view>
		</template>
	</app-layout>
</template>
<script>
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import appBanner from '../../../components/page-component/goods/app-goods-banner.vue';
	import appGoodsTime from '../components/app-goods-time.vue';
	import appMerchantGuarantee from '../components/app-merchant-guarantee.vue';
	import appPriceTitleShare from '../components/app-price-title-share.vue';
	import appGoodsAttr from '../../../components/page-component/goods/app-goods-attr.vue';
	import appRelatedSuggestionProduct from '../../../components/page-component/app-related-suggestion-product/app-related-suggestion-product.vue';
	import appGoodsService from '../../../components/page-component/goods/app-goods-service.vue';
	import appGoodsMarketing from '../../../components/page-component/goods/app-goods-marketing.vue';
	import appJoinMember from '../../../components/page-component/app-join-member/app-join-member.vue';
	import appGoodsDetail from '../../../components/page-component/goods/app-goods-detail.vue';
	// import AppVipCard from '../../../components/page-component/app-vip-card/app-vip-card';
	// import appGoodsFullReduce from "../../../components/page-component/goods/app-goods-full-reduce";
	import appGoodsCoupon from "../../../components/page-component/goods/app-goods-coupon.vue";
	import uAttr from '../../../components/page-component/goods/u-attr.vue';

	export default {
		name: 'goods',
		data() {
			return {
				detail: null,
				full_reduce: null,
				cartShow: false,
				miaosha_status: -1,
				miaosha_time: 0,
				selectAttr: null,
				url: '',
				show: false,
				list: [],
				miaosha_buy_count: 0,
				goods_id: -1,
				is_activity: 0,
				hour: 0,
				minute: 0,
				second: 0,
				day: 0,
				time: -1,
				is_vip_card_user: 0,
				discount: null,
				is_vip: false,
				loading: false,

				poster_config: this.$apiSol.miaosha.poster_config,
				poster_generate: this.$apiSol.miaosha.poster_generate,
				getTheme: 'q'
			}
		},
		onLoad(options) {
			this.goods_id = options.id;
			if (options.is_activity) {
				this.is_activity = options.is_activity
			}
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
		},
		onShow() {
			this.$showLoading();
			this.$nextTick(() => {
				let that = this;
				this.$request({
					url: this.$apiSol.miaosha.goods_detail,
					data: {
						id: this.goods_id,
						is_activity: this.is_activity
					}
				}).then(response => {
					this.$hideLoading();
					if (response.code === 0) {
						let {
							detail,
							miaosha_status,
							miaosha_time,
							miaosha_buy_count
						} = response.data;
						this.detail = detail;
						if (detail.goods_activity) {
							this.full_reduce = detail.goods_activity.full_reduce;
						}
						this.miaosha_status = miaosha_status;
						this.miaosha_buy_count = miaosha_buy_count;
						this.loading = true;
						this.url = `${this.$apiSol.miaosha.poster}&goods_id=${this.detail.id}`;
						this.poster_config = `${this.poster_config}&goods_id=${this.detail.id}`;
						this.poster_generate = `${this.poster_generate}&goods_id=${this.detail.id}`;
						this.getTime(miaosha_time);
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none'
						})
					}
					/* this.$request({
						url: this.$apiSol.goods.new_recommend,
						data: {
							goods_id: this.detail.id,
						}
					}).then(response => {
						if (response.code === 0) {
							this.list = response.data.list;
							if (that.detail.vip_card_appoint.discount) {
								that.is_vip = true;
								that.discount = that.detail.vip_card_appoint.discount
							}
							that.is_vip_card_user = that.detail.vip_card_appoint.is_vip_card_user
						}
					}) */
				});
			})
		},
		onHide() {
			clearInterval(this.time);
		},
		onUnload() {
			clearInterval(this.time);
		},
		computed: {
			// ...mapGetters('mallConfig', {
			// 	getTheme: 'getTheme',
			// }),
			...mapState({
				mall: state => state.mallConfig.mall
			}),
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},
		},
		onShareAppMessage() {
			return this.$shareAppMessage({
				path: '/plugins/mch_solitaire/seckillgoods/seckillgoods',
				title: this.detail.app_share_title ? this.detail.app_share_title : this.detail.name,
				imageUrl: this.detail.app_share_pic ? this.detail.app_share_pic : '',
				params: {
					id: this.detail.id
				}
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			return this.$shareTimeline({
				title: this.detail.app_share_title ? this.detail.app_share_title : this.detail.name,
				query: {
					id: this.detail.id
				}
			});
		},
		// #endif
		methods: {
			async request({
				url,
				data
			}) {
				const response = await this.$request({
					url: url,
					data: data,
				});
				if (response.code === 0) {
					return response.data;
				}
			},
			attrtap(data) {
				this.selectAttr = data;
			},
			takeCart() {
				this.show = true;
			},
			leftFunc(number) {
				this.$request({
					url: this.$apiSol.miaosha.add_cart,
					method: 'post',
					data: {
						miaosha_goods_id: this.selectAttr.goods_id,
						attr_id: this.selectAttr.id,
						num: number
					}
				}).then(response => {
					uni.showToast({
						title: response.msg,
						icon: 'none'
					})
				});
			},
			rightFunc(data) {
				uni.navigateTo({
					url: `/plugins/mch_solitaire/order-submit/order-submit?mch_list=${JSON.stringify([data])}&preview_url=${encodeURIComponent(this.$apiSol.miaosha.order_preview)}&submit_url=${encodeURIComponent(this.$apiSol.miaosha.order_submit)}`
				});
			},
			getTime(newValue) {
				newValue = newValue - 1;
				this.day = parseInt(newValue / 3600 / 24);
				this.hour = parseInt(newValue / 3600 % 24);
				this.minute = parseInt(newValue / 60 % 60);
				this.second = parseInt(newValue % 60);
				clearInterval(this.time);
				this.time = setInterval(() => {
					newValue = newValue - 1;
					if (newValue < 0) {
						clearInterval(this.time);
						if (this.miaosha_status == 1) {
							this.miaosha_status = 0
						}
					}
					this.day = parseInt(newValue / 3600 / 24);
					this.hour = parseInt(newValue / 3600 % 24);
					this.minute = parseInt(newValue / 60 % 60);
					this.second = parseInt(newValue % 60);
				}, 1000);
			},
			setCoupon(index) {
				this.$set(this.detail.goods_coupon_center[index], 'is_receive', 1);
			},

			router(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		components: {
			'app-banner': appBanner,
			'app-goods-time': appGoodsTime,
			'app-merchant-guarantee': appMerchantGuarantee,
			'app-price-title-share': appPriceTitleShare,
			'app-goods-attr': appGoodsAttr,
			'app-related-suggestion-product': appRelatedSuggestionProduct,
			'app-goods-service': appGoodsService,
			'app-goods-marketing': appGoodsMarketing,
			'app-join-member': appJoinMember,
			'app-goods-detail': appGoodsDetail,
			// 'app-vip-card': AppVipCard,
			appGoodsCoupon,
			uAttr,
			// appGoodsFullReduce,
		}
	}
</script>
<style scoped lang="scss">
	.vip-card {
		padding: 0 #{20rpx} #{20rpx};
		background-color: #fff;
	}

	.app-goods {
		background-color: #f7f7f7;
	}

	.marketing {
		margin-top: #{20rpx};
	}

	.buttons {
		width: #{750rpx};
		height: #{110rpx};

		.app-home {
			width: 14%;
			height: #{110rpx};
			background-color: white;



			image {
				width: #{40rpx};
				height: #{40rpx};
			}

			text {
				font-size: #{18rpx};
				color: #707070;

			}
		}

		.app-button {
			width: 100%;
			height: #{110rpx};
			text-align: center;
			line-height: #{110rpx};

			.app-join-cart {
				height: #{110rpx};
			}

			.app-buy {
				height: #{110rpx};
				color: white;
			}

			.notStart {
				height: #{110rpx};
				background-color: #cccccc;
				color: #FFFFFF;
			}

			.app-over {
				height: #{110rpx};
				background: #666;
				color: #FFFFFF;
			}
		}
	}

	.join-member {
		background-color: #ffffff;
		padding: 0 #{24rpx};
	}

	.text {
		color: #ffffff;
	}

	.u-bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1602;
		background-color: #ffffff;
	}

	.u-bottom-height-0 {
		height: 110upx;
	}

	.u-bottom-height-1 {
		height: 190upx;
	}

	.goods-margin {
		margin-top: 20upx;
	}
</style>
